<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="./download/font_t90vc127xkl/iconfont.js"></script>
    <style>
        .icon {
            width: 3em;
            height: 3em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        .all{
            position: relative;
            margin-bottom: 20px;
        }
        .picture{
            position: absolute;
            top: 12px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div v-html='message'></div>
        <div class="all">
            <span v-html='bearpicture'></span>
            <span v-text='bear' class="picture"></span>
        </div>
        <div class="all">
            <span v-html='pigpicture'></span>
            <span v-if='pig'>我是小猪皮杰，我是维尼的好朋友</span>
            <span v-else='pig' class="picture">我是小猪皮杰，我是维尼的好朋友</span>
        </div>
        <div class="all">
            <span v-html='tigerpicture'></span>
            <span v-text='tiger' class="picture"></span>
        </div>
        <button v-bind:disabled='no'>{{no}}</button>
        <span v-bind:id='Id' v-on:click='func' v-html='into'></span>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '.main',
        data: {
            message: '<h1 style="color: darkgreen;">欢迎来到百亩森林</h1>',
            bear: '我是小熊维尼，我爱吃蜂蜜',
            bearpicture: '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiaoxiongweini-"></use></svg>',
            pig: false,
            pigpicture:'<svg class="icon" aria-hidden="true"><use xlink:href="#icon--xiaozhu"></use></svg>',
            tiger:'我是跳跳虎，我有弹簧一样的尾巴',
            tigerpicture:'<svg class="icon" aria-hidden="true"><use xlink:href="#icon-laohu"></use></svg>',
            no:'不前往',
            into:'<button style="color: darkcyan;">点击前往百亩森林</button>',
            Id:11,
            func:function func(){
                alert('success')
            }
        }
    })
</script>

</html>